<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <LeatMenu />
        </el-aside>
        <el-main>
          <div class="flex gap-2">
            <el-tag
              :closable="tag.path != '/'"
              v-for="(tag, index) in store.path"
              :key="tag.path"
              :type="tag.path === activeMenu ? 'primary' : 'info'"
              @click="handleJump(tag)"
              @close="handleClose(tag, index)"
              >{{ tag.name }}</el-tag
            >
          </div>
          <router-view
        /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import LeatMenu from "@/components/LeatMenu.vue";
import { useRouter, useRoute } from "vue-router";
import pinia from "@/store/pinia.js";
import { useStore } from "@/store/index.js";
const store = useStore(pinia);
const router = useRouter();
const route = useRoute();

const activeMenu = ref(route.path);

watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath;
    console.log("newPath");
    console.log(newPath);
  }
);

const handleJump = (tag) => {
  console.log("tag");
  console.log(tag);
  console.log("router.currentRoute.value.path");
  console.log(router.currentRoute.value.path);
  activeMenu.value = router.currentRoute.value.path;
  
  if (activeMenu === tag.path) {
    return;
  }
  router.push(tag.path);
};

const handleClose = (tag, index) => {
  if (activeMenu !== tag.path) {
    store.delete(index);
  } else {
    // 如果删除的是最后位的
    if (index === store.path.length - 1) {
      store.delete(index);
      router.push(store.path[i - 1].path);
    }else{
      // 删除的是当前，但不是最后一个
      store.delete(index);
      router.push(store.path[i].path);
    }
  }
};
</script>

<style scoped>
.el-header {
  background: #000;
}
.el-aside {
  height: calc(100vh - 60px);
}
.el-main {
  height: calc(100vh - 60px);
}
</style>
